require(['config'],()=>{
require(['jquery','paging','pAjax','header','footer'],()=>{

    class List{
        constructor(){
            this.ul = document.querySelector('.ul')
            this.init()
        }
        init(){
            this.request()
            // this.totalNum()
        }
        request(){
            pAjax({url: '/api/goods.json'})
            .then(data=>{
                let res = JSON.parse(data)
                res = res.slice(0, 40)
                this.render(res)
                this.text(res)
               
            })

          

        }
        render(data){
            data.forEach(item=>{
                this.ul.innerHTML += `
                <li>
                    <a href="/html/detail.html?id=${item.goods_id}" style="text-decoration:none; color:black;">
                    <div class="pic">
                        <img src="${item.img_small_logo}">
                    </div>
                    <p class="title hide">${item.title}</p>
                    </a>
                    <p class="price">${item.price}</p>
                    <button data-id=${item.goods_id}>加入购物车</button>
                </li> 
                `
            })
            $(".ul").paging({
                PageNum: 8, //每页显示数目
                pageMax: true, //按钮长度是否显示
                pageMaxHideShow: false, //在最后一个的时候是否隐藏按钮长度
                pageDownUpHide: false, //到第一个或最后一个是否让上一页或下一页消失
                pageInput: true, //是否使用文本框输入跳转
                pagingBtnHide: false, //是否让按钮变为一个
                pagingBtnPaging: true, //按钮是否分页
                pagingDisplay: "flex" //显示的属性，弹性盒子还是块化
            })
            // this.bindHtml(data)
           
            // console.log(data);
        }
        text(res){
            // console.log(res);
            $('button').on('click',function(e){
                /* localStorage中获取商品列表 */
                let target = e.target || e.srcElement
              let productList = JSON.parse(localStorage.getItem('XMYX-CART-LIST')) || []
              let user = JSON.parse(localStorage.getItem('user-Message'))
              //在添加数据之前判断购物车中是否有此商品存在，如果存在数量加1，如果不存在则添加
              let oldProduct = productList.find(item => item.id == res.goods_id)
              //获取对应点击按钮的id
              let id = target.dataset.id - 0
              console.log(id);
              //通过对比拿到数据
              let goods = res.find(item=>{return item.goods_id == id})
              console.log(goods);
            //   console.log(oldProduct);
              if (user) {
                if (oldProduct) {
                  oldProduct.num++
                } else {
                  /* 创建数组 */
                  let cartProdcut = {
                    id: goods.goods_id,
                    url: goods.img_small_logo, //商品图片
                    name: goods.title, //商品名称
                    price: goods.price, //价格
                    num: 1, //商品数量
                    state: false, //状态
                  }
                  productList.push(cartProdcut)
                }
                //将购车列表内容存储在localStorage中
                localStorage.setItem('XMYX-CART-LIST', JSON.stringify(productList))
                alert('添加成功，去购物车看看吧！')
              } else {
                alert('请先登录哦！')
                location.href = '/html/login.html'
              }
            })
            
            }
      
    }

    new List()

})

})